<html>
<head>
<title>Product Page</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/js.js"></script>
<script src="js/jquery.js"></script>
<script src="js/modernizr.js"></script>
</head>
<body>
<div class="product clear">
<header>
<hgroup>
<h1>Vino Tinto - Ribera del Duero</h1>
<h4>Denominación de origen de Castilla y León</h4>
</hgroup>
</header>
<figure>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Valderiz_2006_in_glass.jpg/220px-Valderiz_2006_in_glass.jpg">
<figcaption>Muestra de Presentación</figcaption>
</figure>
<section>
<p>Los vinos de la D.O. Ribera del Duero son de la variedad de uva más característica (Tinta del país), conocida en el mundo del vino como Tempranillo, la cual constituye más del 90% de la producción. </p>
<details>
<summary>Más detalles</summary>
<ul id="desc" class="animated">
<li>6 Litros</li>
<li>6 Unidades por Caja</li>
</ul>
</details>
<button id="prueba">Comprar ahora</button>
</section>
</div>
<input type="text" name="firstname">
<script language="javascript">
    $(function() {
        $("details").click(function() {
		var a=document.getElementsByTagName("details")[0];
			if((a.getAttribute("open")=="")==false){
            animate("#desc", 'fadeInDown');
			return true;
			} else {
			 animate("#desc", 'fadeOutUp');
			 setTimeout(function(){ $("details").removeAttr("open")}, 900);
			}
            return false;
        });
    });

	
    function animate(element_ID, animation) {
        $(element_ID).addClass(animation);
        var wait = window.setTimeout( function(){
            $(element_ID).removeClass(animation)}, 1300
        );
    }
</script>
</body>
</html>